<template>
  <div class="scence">
    <div class="topFace_img">
      <div class="common">
        <div class="face_word1">
          <span>应用场景</span>
        </div>
        <div class="face_word2">
          <p>
            基于区块链可信网络创新创业平台，遵循信创产品兼容性能力，已在众多应用场景落地。
          </p>
        </div>
      </div>
    </div>
    <div class="faceBody_imgs">
      <div class="row_one">
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p0.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+农业</p>
            </div>
            <p>
              在生产线中对每件商品的赋码，消费者扫码可查询产品真伪信息、原粮信息、生产加工信息和物流信息，让消费者感知产品从种子到餐桌的全过程。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p1.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+贸易金融</p>
            </div>
            <p>
              以区块链技术为基础，联合跨境贸易平台、国内外银行、供应链服务商等建立数字化国际贸易和金融服务平台。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p2.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+风控管理</p>
            </div>
            <p>
              运用区块链技术开展银行保险风控应用，提供金融机构间共建风险信息共享区块链，促进风险数据共享和使用，防范交易欺诈、违约风险。
            </p>
          </div>
        </div>
      </div>
      <div class="row_one">
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p3.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+跨境电商</p>
            </div>
            <p>
              通过精准追溯的能力，对跨境商品的生产、装运、检测、入关清关等数据进行全生命周期的溯源，并赋予唯一的“身份证”，让消费者真正买的放心。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p4.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+跨境金融</p>
            </div>
            <p>
              在跨境金融区块链平台上开展新通道物流融资结算、出口应收账款融资等融资类场景的应用和服务贸易税务备案电子化银行核验等支付便利化类场景的业务应用。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p5.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+股权市场</p>
            </div>
            <p>
              基于区块链技术的业务服务平台，链上完成登记结算、交易报告等业务，完成与证监会监管链的对接联通，提高传统业务的运作效率。
            </p>
          </div>
        </div>
      </div>
      <div class="row_one">
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p6.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+人工智能</p>
            </div>
            <p>
              基于区块链的人工智能网络可以设定一致、有效的设备注册、授权及完善的生命周期管理机制，实现契约管理，防止设备被滥用、用户受到伤害，为用户提供更好的服务。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p7.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+NFT（数字资产）</p>
            </div>
            <p>
              NFT在区块链技术支持下，对数字艺术、门票等任何种类的数字商品进行确权。一件数字商品通过NFT手段加密后，生成一种不可替代的数字资产。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p5.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+版权</p>
            </div>
            <p>
              运用区块链技术固定权属信息，完成版权认证、登记、转让等流程操作，加快溯源取证流程，降低版权质押融资认证难度。
            </p>
          </div>
        </div>
      </div>
      <div class="row_one">
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p9.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+教育</p>
            </div>
            <p>
              支持教育用户身份认证、数字教育档案存证与追踪、敏感信息流通控制与隐私保护、基于学分银行的终身学习等创新技术研发与应用。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p10.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+制造</p>
            </div>
            <p>
              基于区块链的供应链管理平台，将供应链物流、交易、资金等信息融合，提升供应链管理效率，降低行业经营风险和成本。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p11.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+能源</p>
            </div>
            <p>
              利用区块链促进源网荷储各环节用户侧资源可信采集、处理与交互，构建多方可信的交易环境与规则体系，解决能源互联网规模场景庞大、互联链条复杂、信任传导差等难题。
            </p>
          </div>
        </div>
      </div>
      <div class="row_one">
        <div class="img_rows">
          <div class="imgPic">
            <img
              data-src="../../../public/Sence-pic/img_u24.png"
              class="img"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+人社</p>
            </div>
            <p>
              支持开展社保参保证明、电子劳动合同等区块链应用，支持与其他政府部门行业链、城市区块链、社会机构链的互通互信。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p13.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+卫生健康</p>
            </div>
            <p>
              在数据共享方面，运用区块链对数据进行存证，确保数据完整性和可追溯性；在健康档案共享查阅方面，推动医疗机构数据上链，为居民提供优质健康服务。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p14.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+民政</p>
            </div>
            <p>
              电子证照跨链互认方面，推动婚姻登记证、社会组织法人登记证等上链并实现跨区域可信共享。
            </p>
          </div>
        </div>
      </div>
      <div class="row_one">
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p15.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+政务服务</p>
            </div>
            <p>
              基于区块链技术的电子证照服务平台，推动电子证照跨域互认互信，进一步推动减材料、免证办。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p16.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+政务数据共享</p>
            </div>
            <p>
              提升政务数据流转共享和全流程安全可控能力，营造区块链+政务数据共享良好生态，不断加强政务数据安全有序共享。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p17.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+法治</p>
            </div>
            <p>
              利用区块链技术辅助实现行政执法三项制度的落实对行政执法主体、行政执法人员资格、行政执法全过程进行记录存证和合法性审核，进一步加强行政执法监督质效。
            </p>
          </div>
        </div>
      </div>
      <div class="row_one">
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p18.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+税费服务</p>
            </div>
            <p>
              利用区块链数据防篡改、流程可追溯的技术特点，构建涉税涉费信息共识共享平台，建立征缴更高效、服务更便捷的部门协作管理机制。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p19.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+审判</p>
            </div>
            <p>
              通过运用司法区块链技术，实现异构数据上链存证验证，帮助当事人降低成本、高效固定和追溯有关电子证据等数据，减轻人民群众诉累。
            </p>
          </div>
        </div>
        <div class="img_rows">
          <div class="imgPic">
            <img
              class="img"
              data-src="../../../public/Sence-pic/p20.png"
              alt=""
              width="357px"
            />
          </div>
          <div class="imgTit">
            <div class="imgH2">
              <p>区块链+检察</p>
            </div>
            <p>
              利用区块链技术开展数字化、线上化等技术存证固证应用并辅助电子数据审查，提升办案质效。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
let timer = ref(null);

onMounted(() => {
  //图片懒加载
  let imgs = document.querySelectorAll(".img");
  function lazyload(fn, context) {
    let timer = "";
    return function () {
      let con = this;
      console.log(con);
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(this);
          timer = null;
        }, 200);
      }
    };
  }
  window.onscroll = lazyload(fn, true);
  fn();
  function fn() {
    let offsetHeight =
      window.innerHeight || document.documentElement.clientHeight;
    Array.from(imgs).forEach((item, index) => {
      let oBounding = item.getBoundingClientRect();
      console.log(index, oBounding.top, offsetHeight);
      if (0 <= oBounding.top && oBounding.top <= offsetHeight) {
        item.setAttribute("src", item.getAttribute("data-src"));
      }
    });
  }
});
</script>

<style scoped>
.scence {
  height: 100%;
  width: 100%;
  position: relative;
  /* background-color: #a14e4e; */
}

.topFace_img {
  width: 100%;
  height: 400px;
  background-image: url("../../../public/Sence-pic/u117_state0.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}
.common {
  position: relative;
}
.face_word1 {
  border-width: 0px;
  position: absolute;
  top: 93px;
  width: 193px;
  height: 57px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 48px;
  color: #f2f2f2;
}

.face_word2 {
  border-width: 0px;
  position: absolute;
  top: 179px;
  width: 811px;
  height: 28px;
  font-family: "Arial Normal", "Arial";
  font-weight: 500;
  font-style: normal;
  color: #f2f2f2;
  line-height: 28px;
}

.face_word2 p {
  font-size: 18px;
  font-weight: 500;
}

.faceBody_imgs {
  position: relative;
  top: 60px;
  margin: auto;
  width: 1120px;
  min-height: 2058px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
}

.row_one {
  height: 273px;
  display: flex;
  justify-content: space-between;
}

.imgTit {
  padding-left: 10px;
  padding-bottom: 10px;
}

.img_rows {
  border: 1px solid #f2f2f2;
  margin-bottom: 20px;
  width: 32%;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #333333;
  line-height: normal;
}
.imgPic {
  overflow: hidden;
}
.imgPic img {
  display: inline-block;
  height: 100%;
  width: 100%;
  cursor: pointer;
  transition: all 0.6s;
}
.imgPic img:hover {
  transform: scale(1.1);
}
.imgH2 {
  box-shadow: none;
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 40px;
}
.imgH2:hover {
  color: #0076d9;
}
</style>